const usernameEl = document.querySelector('.username')
const token = localStorage.getItem('token')
const username = localStorage.getItem('uname')
if (username) {
    usernameEl.innerHTML = username
}

// document.querySelector('#logout').addEventListener('click', function () {
//     pxmu.diaglog('确定退出？')
//         .then(res => {
//             if (res.btn == 'right') {

//                 localStorage.removeItem('username')
//                 localStorage.removeItem('token')
//                 location.href = './login.html'

//             }
//         })
// })

// // 渲染 总汇数据
// function render(overView) {
//     document.querySelector('.salary').innerHTML = overView.salary
//     document.querySelector('.student_count').innerHTML = overView.student_count
//     document.querySelector('.age').innerHTML = overView.age
//     document.querySelector('.group_count').innerHTML = overView.group_count
// }

const salaryTrend = echarts.init(document.querySelector('#line'))

// 获取学生统计数据  JWT验证控制(选headers头添加 token效验)
axios.get('/dashboard').then(res => {
    // let overView = res.data.overview  // 已数据剥离，减少一个data
    console.log(res.data)
    // console.log(res.data.year.map(v => console.log(v.month)))
    // 头部汇总数据汇总 渲染
    // render(res.data.overview)

    const overview = res.data.overview
    for (key in overview) {
        document.querySelector(`.${key}`).innerHTML = overview[key]
    }

    // 2024年薪资走势
    setSalaryTrend(res)

    // 班级薪资分布 echarts图 渲染
    setSalaryDistribute(res)
    let btnsIndexof = 1;
    setGroupSalary(res, btnsIndexof) // 班级每组薪资图 默认渲染第一页
    document.querySelector('#btns').addEventListener('click', function (e) {
        // 获取所有 .btn.btn-xs 元素
        const btnXsBox = document.querySelectorAll('.btn.btn-xs');
        if (e.target.tagName === 'BUTTON') {
            btnXsBox.forEach(element => {
                element.classList.remove('btn-blue');
            });
            e.target.classList.add('btn-blue')
            // 查找点击的按钮在 btnXsBox 中的索引
            const index = Array.from(btnXsBox).indexOf(e.target);
            btnsIndexof = index + 1
            console.log(btnsIndexof);  // 获得点击页数
            setGroupSalary(res, btnsIndexof)  // 渲染 班级每组薪资
        }
    })

    // 男女薪资分布渲染
    genderDistribute(res)

    // 全国分布数据
    let nationData = res.data.provinceData.map(v => ({
        name: v.name,
        value: v.value
    }))
    console.log('nationData-->', nationData);
    console.log(`tipData==`, Math.round(Math.random() * 1000), Math.round(Math.random() * 1000));

    // 全国分布地图渲染
    setMap(res)


})
    .catch(err => {
        console.log('There was an error: ', err);
    })

// 班级每组薪资 echarts图 渲染
function setGroupSalary(res, btnsIndexof) {
    // 班级每组薪资
    // console.log('llaal');
    // console.log(res.data.groupData[1]);
    const groupSalaryInfo = res.data.groupData[btnsIndexof].map(item => [
        item.name,
        item.hope_salary,
        item.salary
    ],);
    // console.log(groupSalaryInfo);

    const groupSalaryInit = echarts.init(document.querySelector('#lines'))
    const groupSalary1 =

    {
        legend: {

        },
        tooltip: {},
        dataset: {
            source: groupSalaryInfo
        },
        xAxis: { type: 'category' },
        yAxis: {},
        // Declare several bar series, each will be mapped
        // to a column of dataset.source by default.
        series: [
            {
                type: 'bar', color: '#45D49F',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#32D79E' },
                        { offset: 1, color: '#CAF3E3' }
                    ])
                }

            }, {

                type: 'bar', color: '#4FA3ED',
                itemStyle: {
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        { offset: 0, color: '#4FA3ED' },
                        { offset: 1, color: '#D1E7F8' }
                    ])
                }


            }


        ],

    };

    groupSalaryInit.setOption(groupSalary1)
}

// 班级薪资分布
function setSalaryDistribute(res) {
    // 薪资分布图 
    // 薪资分布图 元素
    const salaryDistribute = echarts.init(document.querySelector('#salary'))
    const salaryInfo = res.data.salaryData.map(item => ({
        name: item.label,
        value: item.g_count + item.b_count
    }));
    const classSalary = {
        // 标题组件
        title: {
            // 主标题文本
            text: '班级薪资分布'
        },
        tooltip: {
            trigger: 'item'
        },
        legend: {
            bottom: '5%',
            left: 'center'
        },
        series: [
            {
                name: 'Access From',
                type: 'pie',
                radius: ['50%', '70%'],
                avoidLabelOverlap: false,
                itemStyle: {
                    borderRadius: 10,
                    borderColor: '#fff',
                    borderWidth: 2
                },
                label: {
                    show: false,
                    position: 'center'
                },
                emphasis: {
                    label: {
                        show: true,
                        fontSize: 40,
                        fontWeight: 'bold'
                    }
                },
                labelLine: {
                    show: false
                },
                data: salaryInfo


            }
        ]
    };
    salaryDistribute.setOption(classSalary)
}

// 2024年薪资走势
function setSalaryTrend(res) {
    const salaryTrend1 = {
        // 标题组件
        title: {
            // 主标题文本
            text: '2024薪资走势'
        },
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: res.data.year.map(v => v.month),
        },
        yAxis: {
            type: 'value'
        },
        series: [
            {
                data: res.data.year.map(v => v.salary),
                type: 'line',
                lineStyle: {// 样式
                    width: '5',// 宽度
                },
                areaStyle: {
                    color: {
                        type: 'linear',
                        x: 0,
                        y: 0,
                        x2: 0,
                        y2: 1,
                        colorStops: [{
                            offset: 0, color: '#8DC3F5' // 0% 处的颜色
                        }, {
                            offset: 1, color: 'rgb(255,255,255,0)' // 100% 处的颜色
                        }],
                        global: false // 缺省为 false
                    }



                },
                smooth: true
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    salaryTrend.setOption(salaryTrend1)

}


// 男女薪资分布
function genderDistribute(res) {
    const genderDistributeInit = echarts.init(document.querySelector('#gender'))

    // let menData = res.data.salaryData.map(v => ({
    //     name: v.label,
    //     value: v.b_count

    // }))
    // console.log(menData);

    // // 男女薪资分布渲染
    // let girlData = res.data.salaryData.map(v => ({
    //     name: v.label,
    //     value: v.g_count

    // }))
    // console.log(girlData);

    const genderDistribute1 = {
        title: [
            {
                text: '男女薪资分布',
                left: '25%',
                top: '10%'
            },
            {
                text: '男生',
                left: '48%',
                bottom: '45%',
                textStyle: {
                    fontSize: '12'
                }
            },
            {
                text: '女生',
                left: '48%',
                bottom: '10%',
                textStyle: {
                    fontSize: '12'
                }
            }
        ],
        tooltip: {
            trigger: 'item'
        },
        color: ['#fda224', '#5097ff', '#3abcfa', '#34d39a'],
        series: [
            {
                bottom: '30%',
                left: '40%',
                width: '20%',
                name: 'Access From',
                radius: ['50%', '70%'],
                // center: ['50%', '30%'],
                avoidLabelOverlap: false,
                type: 'pie',
                data: res.data.salaryData.map(v => ({
                    name: v.label,
                    value: v.b_count

                })),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            },
            {
                top: '40%',
                left: '40%',
                width: '20%',
                name: 'Access From',
                radius: ['50%', '70%'],
                // center: ['50%', '70%'],
                avoidLabelOverlap: false,
                type: 'pie',
                data: res.data.salaryData.map(v => ({
                    name: v.label,
                    value: v.g_count

                })),
                emphasis: {
                    itemStyle: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };
    genderDistributeInit.setOption(genderDistribute1)

}

// 地图分布
function setMap(res) {
    // console.log(res.data.provinceData);
    const provinceData = res.data.provinceData
    const dataList = [
        { name: '南海诸岛', value: 0 },
        { name: '北京', value: 0 },
        { name: '天津', value: 0 },
        { name: '上海', value: 0 },
        { name: '重庆', value: 0 },
        { name: '河北', value: 0 },
        { name: '河南', value: 0 },
        { name: '云南', value: 0 },
        { name: '辽宁', value: 0 },
        { name: '黑龙江', value: 0 },
        { name: '湖南', value: 0 },
        { name: '安徽', value: 0 },
        { name: '山东', value: 0 },
        { name: '新疆', value: 0 },
        { name: '江苏', value: 0 },
        { name: '浙江', value: 0 },
        { name: '江西', value: 0 },
        { name: '湖北', value: 0 },
        { name: '广西', value: 0 },
        { name: '甘肃', value: 0 },
        { name: '山西', value: 0 },
        { name: '内蒙古', value: 0 },
        { name: '陕西', value: 0 },
        { name: '吉林', value: 0 },
        { name: '福建', value: 0 },
        { name: '贵州', value: 0 },
        { name: '广东', value: 0 },
        { name: '青海', value: 0 },
        { name: '西藏', value: 0 },
        { name: '四川', value: 0 },
        { name: '宁夏', value: 0 },
        { name: '海南', value: 0 },
        { name: '台湾', value: 0 },
        { name: '香港', value: 0 },
        { name: '澳门', value: 0 },
    ]
    // 筛选数据
    dataList.forEach(item => {
        const res = provinceData.find(v => {
            return v.name.includes(item.name)
        })
        // console.log(res)

        // 数据赋值
        if (res !== undefined) {
            item.value = res.value
        }
        // res !== undefined ? item.value = res.value : item.value = 0
    })
    console.log(dataList)

    const mapInit = echarts.init(document.querySelector('#map'))
    const option = {
        title: {
            text: '籍贯分布',
            top: 10,
            left: 10,
            textStyle: {
                fontSize: 16,
            },
        },
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c} 位学员',
            borderColor: 'transparent',
            backgroundColor: 'rgba(0,0,0,0.5)',
            textStyle: {
                color: '#fff',
            },
        },
        visualMap: {
            min: 0,
            max: 6,
            left: 'left',
            bottom: '20',
            text: ['6', '0'],
            inRange: {
                color: ['#ffffff', '#0075F0'],
            },
            show: true,
            left: 40,
        },
        geo: {
            map: 'china',
            roam: false,
            zoom: 1.0,
            label: {
                normal: {
                    show: true,
                    fontSize: '10',
                    color: 'rgba(0,0,0,0.7)',
                },
            },
            itemStyle: {
                normal: {
                    borderColor: 'rgba(0, 0, 0, 0.2)',
                    color: '#e0ffff',
                },
                emphasis: {
                    areaColor: '#34D39A',
                    shadowOffsetX: 0,
                    shadowOffsetY: 0,
                    shadowBlur: 20,
                    borderWidth: 0,
                    shadowColor: 'rgba(0, 0, 0, 0.5)',
                },
            },
        },
        series: [
            {
                name: '籍贯分布',
                type: 'map',
                geoIndex: 0,
                data: dataList,
            },
        ],
    }
    mapInit.setOption(option)

}